<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="header">挂号详情</div>
      </template>
      <div class="content-top">
        <el-tag type="success">
          <div class="tag">
            <svg t="1730796582912" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="4260" data-spm-anchor-id="a313x.search_index.0.i1.2a503a81wylC0h" width="16" height="16">
              <path
                  d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z"
                  fill="#1afa29" p-id="4261"></path>
            </svg>
            <span>{{orderInfo?.param.orderStatusString}}</span>
          </div>
        </el-tag>
        <div class="right">
          <img src="../../../assets/vue.svg" alt=""/>
          <div class="desc">微信 关注</div>
        </div>
      </div>
      <!--订单详情底部-->
      <div class="bottom">
        <div class="left">
          <el-descriptions
              class="margin-top"
              :column="1"
              border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  就诊人信息
                </div>
              </template>
              {{orderInfo?.patientName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  就诊日期
                </div>
              </template>
              {{orderInfo?.reserveDate}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  就诊医院
                </div>
              </template>
              {{ orderInfo?.hosname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  就诊科室
                </div>
              </template>
              {{orderInfo?.depname}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  医生职称
                </div>
              </template>
              {{orderInfo?.title}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  医事服务费
                </div>
              </template>
              ￥{{orderInfo?.amount}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  挂号单号
                </div>
              </template>
              {{orderInfo?.outTradeNo}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  挂号时间
                </div>
              </template>
              {{ orderInfo?.createTime }}
            </el-descriptions-item>
          </el-descriptions>
          <div class="btn" v-if="orderInfo?.orderStatus !== -1">
            <el-popconfirm title="确定要取消预约吗？" @confirm="confirmOrder">
              <template #reference>
                <el-button >取消预约</el-button>
              </template>
            </el-popconfirm>
            <el-button type="primary" v-if="orderInfo?.orderStatus === 0 " @click="openPayDialog">支付</el-button>
          </div>
        </div>
        <div class="right">
          <el-card>
            <template #header>
              注意事项
            </template>
            <p>1请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人
              承担；</p>
            <p style="color: red">2.【取号】就诊当天需在2023-06-10 09：00前在医院取号，未取号视为爽
              约，该号不退不换</p>
            <p>3.【退号】在2023-06-0915：30前可在线退号，逾期将不可办理退号退
              费；</p>
            <p>4,北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患
              者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用
              的有效身份证件到院取号：</p>
            <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
          </el-card>
        </div>
      </div>
    </el-card>
    <el-dialog class="dialog" title="微信支付" v-model="visible" width="400px" @close="closePayDialog" >
      <img :src="imgUrl" alt="">
      <p>使用微信扫一扫</p>
      <p>扫描二维码支付</p>
      <template #footer>
        <div class="btn">
          <el-button @click="closePayDialog">关闭窗口</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>
<script setup lang="ts">

import {onMounted, ref} from "vue";
import {reqCancelOrder, reqOrderInfo, reqPayResult, reqQrcode} from "@/api/user";
import {useRoute} from "vue-router";
import {OrderInfo} from "@/api/user/type.ts";
import {ElMessage} from "element-plus";
//生成二维码
import QrCode from 'qrcode';

const $route = useRoute()
const orderInfo = ref<OrderInfo>()
//控制对话框显示与隐藏
const visible = ref<boolean>(false)
onMounted(() => {
  getOrderDetail()
})
//存储二维码路径
const imgUrl = ref('')
//存储定时器引用
const timer = ref();
const getOrderDetail =async () => {
  const result = await reqOrderInfo($route.query.orderId as string)
  console.log(result)
  if(result.code === 200){
    orderInfo.value = result.data
  }else{
    ElMessage.error(result.message)
  }
}
//取消预约
const confirmOrder = async ()=>{
  try {
    const result = await reqCancelOrder($route.query.orderId as string);
    console.log(result)
    if(result.code === 200){
      ElMessage.success("取消预约成功")
      await getOrderDetail()
    }else{
      ElMessage.error("取消预约失败"+result.message);
    }
  } catch (e) {
    ElMessage.error("取消预约失败");
  }
}
//关闭支付弹窗
const closePayDialog = ()=>{
  visible.value = false
  clearInterval(timer.value)
}
//打开支付弹窗
const openPayDialog = async ()=>{
  visible.value = true
  const result = await reqQrcode($route.query.orderId as string);
  if(result.code === 200){
    imgUrl.value = await QrCode.toDataURL(result.data.codeUrl)
    //查询支付结果
    timer.value = setInterval(async ()=>{
      const result = await reqPayResult($route.query.orderId as string);
      console.log(result)
      if(result.code === 200){
        if(result.data){
          //支付成功
          clearInterval(timer.value)
          visible.value = false
          ElMessage.success("支付成功")
          await getOrderDetail()
        }
      }
    },3000)

  }
}
</script>

<style scoped lang="scss">
.box-card {
  .header {
    color: $gray1;
  }

  .content-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 20px 10px;
    border-bottom: 1px solid $gray3;

    .tag {
      display: flex;
      align-items: center;

      span {
        margin-left: 5px;
      }
    }

    .right {
      display: flex;
      align-items: center;

      img {
        width: 50px;
        height: 50px;
      }

      .desc {
        margin-left: 5px;
      }
    }
  }

  .bottom {
    margin-top: 20px;
    display: flex;

    .left {
      flex: 4;

      .btn {
        text-align: center;
        margin-top: 15px;
      }
    }

    .right {
      flex: 6;
      margin-left: 10px;
      p{
        line-height: 25px;
      }
    }
  }
}
:deep(.el-dialog__body){
  border-bottom: 1px solid $gray2;
  border-top: 1px solid $gray2;
  text-align: center;
}
.dialog{
  p{
    margin: 10px 0;
  }
}
</style>
